<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>化工生产故障监控系统</title>
    <link href="../static/css/monitor.css" rel="stylesheet">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background-image: url(../static/image/background1.jpg); background-size: 100% 100%;">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">控制台</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                {% if login_user == 'admin' %}
                <li><a href="/control"> 用户管理 </a></li>
                {% endif %}
                <li class="active"><a href="#">工厂故障监测</a></li>
                {% if login_user == 'admin' %}
                <li><a href="/faultInfo">故障记录</a></li>
                {% endif %}
            </ul>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><p class="navbar-text">{{login_user}} 用户登录</p></li>
            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
        </ul>
    </div>

</nav>
<div id="front">
    <font id="work1" class="wordcolor">工作状态：正常</font>
    <font id="work4" class="wordcolor">故障种类：--</font>
</div>


<div id="center">
    <div id="center-left" style=" height:480px;width:690px;">
        <div style="height: 20px; width: 20px; position: absolute; left: 40px; top: 196px;">
            <button class="mybytn" id="1">1</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; top: 389px; left: 4px;">
            <button class="mybytn" id="2">2</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 32px; top: 262px;">
            <button class="mybytn" id="3">3</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 291px; top: 367px;">
            <button class="mybytn" id="4">4</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 357px; top: 196px;">
            <button class="mybytn" id="5">5</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 97px; top: 142px;">
            <button class="mybytn" id="6">6</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 101px; top: 555px;">
            <button class="mybytn" id="7">7</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 3px; top: 469px;">
            <button class="mybytn" id="8">8</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 66px; top: 262px;">
            <button class="mybytn" id="9">9</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 24px; top: 550px;">
            <button class="mybytn" id="10">10</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 322px; top: 367px;">
            <button class="mybytn" id="11">11</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 387px; top: 197px;">
            <button class="mybytn" id="12">12</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 95px; top: 384px;">
            <button class="mybytn" id="13">13</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 252px; top: 471px;">
            <button class="mybytn" id="14">14</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 331px; top: 245px;">
            <button class="mybytn" id="15">15</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 627px; top: 315px;">
            <button class="mybytn" id="16">16</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 627px; top: 343px;">
            <button class="mybytn" id="17">17</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 627px; top: 372px;">
            <button class="mybytn" id="18">18</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 627px; top: 401px;">
            <button class="mybytn" id="19">19</button>
        </div>
        <div style="height: 20px; width: 20px; position: absolute; left: 627px; top: 429px;">
            <button class="mybytn" id="20">20</button>
        </div>
        <div style="height: 25px; width: 25px; position: absolute; left: 127px; top: 556px;">
            <button class="mybytn" id="21">21</button>
        </div>
    </div>

    <div id="center-right">
        <div id="cha" class="chart"></div>


        <div class="monitor" id="monitor">
            <div class="parm">
                <div class="monitor-left" id="monitor-left">系统信息</div>
                <div class="monitor_right" id="monitor-right">
                    <p>反应器温度:--℃(预留)</p>
                    <p>反应器压强:--MPa(预留)</p>
                    <p>冷凝器温度:--℃(预留)</p>
                    <p>汽提塔压强:--MPa(预留)</p>
                </div>
            </div>
            <div class="advice">
                <div class="advice-left" id="advice-left">维修意见</div>
                <div class="advice-right" id="advice-right"></div>
            </div>
        </div>
    </div>

</div>
<div class="bottom" id="bottom">
    <div class="btn-group">
        <button class="btn btn-primary btn-lg" id="message" style="margin-left: 400px;">
            通知维修人员
        </button>
        {% if login_user == 'admin' %}
        <button class="btn btn-primary btn-lg" id="bounce" style="margin-left: 150px;">
            恢复监测状态
        </button>
        {% endif %}
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" id="formid"
                style="margin-left: 150px;">
            填写维修信息
        </button>
    </div>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel" style="font-size: 18px;text-align: center">
                        故障维修记录表
                    </h4>
                </div>
                <form id="form_data">
                    <div class="modal-body">
                        <table class="table">
                            <tr>
                                <td><span style="font-size: 18px;">维修人员: </span></td>
                                <td><input type="text" id="fixer" name="fixer"/></td>
                            </tr>
                            <tr>
                                <td><span style="font-size: 18px;">值班人员: </span></td>
                                <td><input type="text" id="dutyer" name="dutyer"/></td>
                            </tr>
                            <tr>
                                <td><span style="font-size: 18px">维修措施：</span></td>
                                <td><input type="text" id="broken" name="broken"/></td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-size: 18px">故障是否排除&nbsp;&nbsp;</span>
                                </td>
                                <td>
                                    <input type="radio" id="cbox1" name="choice">
                                    <span style="font-size: 18px">是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <input type="radio" id="cbox2" name="choice" checked="checked">
                                    <span style="font-size: 18px">否</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span style="font-size: 18px">故障未排除原因：</span></td>
                                <td><textarea id="lost" name="lost" rows="3" cols="50"></textarea></td>
                            </tr>
                        </table>
                        <input type="hidden" id="act" value="add" name="act"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" onclick="add_info()" class="btn btn-primary">提交日志</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
</script>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/jquery-1.10.2.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/commonUtil.js"></script>
<script src="../static/js/errorMessage.js"></script>
<script src="../static/js/context.js"></script>